<template>
	<view class="content">
		<!-- 轮播 -->
		<view class="scrollBox">
			<view class="swiperBox">
				<swiper class="swiper-item" circular='true' autoplay="true" :interval="3000" :duration="1000"
					@change="change">
					<swiper-item class="swiper-item" v-for="(item,index) in bannerList" :key="index">
						<image :src="item.url" class="itemImg"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 简介 -->
			<view class="briefBox">
				<text class="name">{{projectName}}</text>
				<view class="describeBox">
					<view class="describeItem" v-for="(item,index) in tagArr" :key="index">
						{{item}}
					</view>
				</view>
				<view class="shareBox">
					<!-- <image src="@/static/index/share.png" class="shareIcon"></image> -->
					<text class="shareText">转发</text>
					<button open-type="share" class="shareBtn"></button>
				</view>
				<view class="infoBox">
					<text class="price">均价<text class="priceNum">{{project.average_price}}</text>元/m2</text>
					<view class="line"></view>
					<view class="commissionBox">
						<view class="label">佣金</view>
						<text class="percent">合同总价{{project.brokerage}}%</text>
					</view>
					<view class="line"></view>
					<text class="address" @click="navigation()">{{project.address}}</text>
					<!-- <image src="@/static/index/navigation.png" class="navigation" @click="navigation()"></image> -->
				</view>
				<view class="highlightsBox">
					<text class="title" space="ensp">[ 楼盘亮点 ]</text>
					<view class="highlightsItemBox">
						<view class="highlightsItem" v-for="(item,index) in highlightsArr" :key="index">
							<text class="left">绵投集团</text>
							<text class="center">/</text>
							<text class="right">美好共计新生</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 户型图 -->
			<text class="huxingTitle">户型展示</text>
			<scroll-view scroll-x="true" class="huxingBox">
				<view class="hxItem" v-for="(item,index) in project.project_ichnography" :key="index">
					<image :src="item.url" class="item"></image>
					<view class="nameBox">
						<text class="hxname">{{item.name}}</text>
						<text class="hxarea">建筑面积约{{item.acreage}}㎡</text>
					</view>
					<image :src="imgUrl+'index/search.png'" class="big" @click="showBig(index)"></image>
				</view>
			</scroll-view>
			<!-- 公众号图片 -->
			<image :src="imgUrl+'index/officialaccount.png'" class="officialaccount"></image>
			<!-- 地图 -->
			<view class="mapBox">
				<text class="mapTitle">周边概况</text>
				<view class="mapContainer">
					<map style="width: 100%; height: 100%; border-radius: 10rpx;" scale="15" :latitude="latitude"
						:longitude="longitude" :markers="markers" @markertap="markertap"></map>
				</view>
				<view class="mapMenuBox" @click="$navto.navto('../around/around',{id:project.id})">
					<view class="mapMenuItem">
						<image :src="imgUrl+'index/traffic.png'" class="itemIcon"></image>
						<text class="itemText">交通</text>
					</view>
					<view class="mapMenuItem">
						<image :src="imgUrl+'index/health.png'" class="itemIcon"></image>
						<text class="itemText">医疗</text>
					</view>
					<view class="mapMenuItem">
						<image :src="imgUrl+'index/education.png'" class="itemIcon"></image>
						<text class="itemText">教育</text>
					</view>
					<view class="mapMenuItem">
						<image :src="imgUrl+'index/entertainment.png'" class="itemIcon"></image>
						<text class="itemText">娱乐</text>
					</view>
				</view>
			</view>
			<!-- 顾问 -->
			<text class="guwenTitle">金牌顾问</text>
			<view class="guwenBox">
				<view class="guwenItem" v-for="(item,index) in guwenList.slice(0,4)" :key="index">
					<image :src="item.head_img" class="avatar"></image>
					<text class="name">{{item.name}}</text>
					<uni-rate :value="item.score" size="16" data-num='1' class="rate" color="#e62129"
						disabledColor="#e62129" disabled='false' />
					<text class="describe">{{item.tag}}</text>
					<view class="zixun">
						线上咨询
						<button open-type="contact" class="zixunBtn"></button>
					</view>
					<view class="tel" @click="makePhoneCall(index)">
						电话咨询
					</view>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="btn" @click="$navto.navto('../guwen/guwen',{id:project.id})">
				查看更多官方顾问
			</view>
			<!-- 楼盘详情 -->
			<view class="detailBox">
				<view class="top">
					<view class="left">
						楼盘详情
					</view>
					<view class="right" @click="$switchTab('/pages/zhiye/zhiye')">
						查看更多>
					</view>
				</view>
				<image :src="imgUrl+'index/detail.png'" class="detailImg"></image>
				<view class="detailBoxInner">
					<view class="text">
						<view class="dot"></view>
						<text>开发商:{{project.developers}}</text>
					</view>
					<view class="text">
						<view class="dot"></view>
						产权年限:{{project.property_year}}
					</view>
					<view class="text">
						<view class="dot"></view>
						装修状况:{{project.renovation}}
					</view>
					<view class="text">
						<view class="dot"></view>
						交房时间:{{project.delivery_date}}
					</view>
				</view>
				<view class="line"></view>
				<view class="shenmingBox">
					<view class="title">
						<view class="dot"></view>
						免责声明:
					</view>
					<text class="info">{{agreeContent}}</text>
				</view>
			</view>
			<!-- 底部按钮 -->
			<view class="bottomMenuBox">
				<view class="left">
					<view class="shareBox">
						<!-- <image src="@/static/index/share.png" class="shareIcon"></image> -->
						<text class="shareText">转发</text>
						<button open-type="share" class="shareBtn"></button>
					</view>
					<view class="orderBox" @click="$navto.navto('../order/order',{id:project.id})">
						<!-- <image src="@/static/index/time.png" class="orderIcon"></image> -->
						<text class="orderText">预约</text>
					</view>
				</view>
				<view class="right"
					@click="is_broker==0? $navto.navto('../tuijianrenzheng/tuijianrenzheng',{id:project.id}) : $navto.navto('../tuijian/tuijian',{id:project.id})">
					立即推荐
				</view>
			</view>
			<!-- 户型大图 -->
			<view class="bigBox" v-if="isBig">
				<view class="bigInfo">
					<view class="title">{{bigName}}</view>
					<swiper class="bigswiperBox" :interval="3000" @change="swiperChange" :current="bigIndex">
						<swiper-item class="swiper-item" v-for="(item,index) in bigImgArr" :key="index">
							<image :src="item.url" class="itemImg"></image>
						</swiper-item>
					</swiper>
					<!-- <image src="@/static/index/close.png" class="close" @click="closeBig()"></image> -->
					<view class="bigarrowBox">
						<!-- <image src="@/static/index/arrowLeft.png" class="arrowLeft" @click="bigCurrent(0)"></image> -->
						<view class="bigswiperNum">
							<text class="bigswiperIndex">{{bigIndex+1}}/{{bigImgArr.length}}</text>
						</view>
						<!-- <image src="@/static/index/arrowRight.png" class="arrowRight" @click="bigCurrent(1)">
							</image> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: this.$imgUrl,
				projectName: '',
				project: '',
				bannerList: [],
				guwenList: [],
				current: 1,
				guwenList: [],
				scrollTop: 0,
				is_broker: '',
				latitude: '',
				longitude: '',
				qqmapsdk: '',
				markers: [],
				mapCtx: '',
				isBig: false,
				bigName: '',
				bigImgArr: '',
				bigIndex: 0,
				id: '',
				tagArr: [],
				highlightsArr: [],
				agreeContent: '',
				is_broker: ''

			}
		},
		onShow() {
			this.is_broker = uni.getStorageSync('is_broker')
		},
		onLoad(options) {
			this.id = options.id;
			// 顾问列表counselorIndex?project_id=2&name=顾问&developers_code=123456
			this.$request.get(`counselorIndex?project_id=${this.id}&developers_code=${this.$developersCode}`).then(res => {
				this.guwenList = res.data.data;
			})
			// 项目详情
			this.$request.get(`projectShow/${this.id}?developers_code=${this.$developersCode}`).then(res => {
				this.project = res.data;
				this.bannerList = JSON.parse(this.project.thumb_images);
				// this.projectImg = JSON.parse(this.project.projectImg);//户型图
				this.projectName = this.project.name;
				this.latitude = this.project.latitude;
				this.longitude = this.project.longitude;
				this.tagArr = this.strtoarr(this.project.tag, "/");
				this.highlightsArr = this.strtoarr(this.project.highlights, "/");
				let obj = {};
				obj.id = 1;
				obj.width = '35rpx';
				obj.height = '45rpx';
				let calloutobj = {};
				calloutobj.content = this.project.name;
				calloutobj.display = 'ALWAYS';
				calloutobj.color = '#ffffff';
				calloutobj.fontSize = '16px';
				calloutobj.borderRadius = '5px';
				calloutobj.bgColor = "#4173FA";
				calloutobj.textAlign = "center";
				calloutobj.borderWidth = "5px"
				obj.callout = calloutobj;
				obj.latitude = this.latitude;
				obj.longitude = this.longitude;
				obj.iconPath = "https://qthf.cdguguai.net.cn/img/index/addressIcon.png";
				this.markers.push(obj);
				this.projectName = this.project.name;
			})
			//项目免责声明
			this.id = options.id;
			this.$request.post(`projectAgree`, {
				developers_code: this.$developersCode,
				project_id: this.id,
				type: 1
			}).then(res => {
				// console.log(res.data.content);
				console.log(res.data.data.content);
				this.agreeContent = res.data.data.content;
			})
		},
		methods: {
			change(e) {
				this.bigIndex = e.detail.current + 1
			},
			showBig(index) {
				console.log(index);
				this.isBig = true;
				this.bigIndex = 0;
				this.bigName = this.project.project_ichnography[index].name;
				this.bigImgArr = JSON.parse(this.project.project_ichnography[index].plan_img);
			},
			bigCurrent(num) {
				console.log(num);
				console.log(this.bigIndex);
				console.log(this.bigImgArr.length);
				console.log(num == 0 && this.bigIndex > 0)
				if (num == 0 && this.bigIndex > 0) { //上一页
					this.bigIndex--;
				} else if (this.bigIndex < this.bigImgArr.length - 1 && num == 1) { //下一页
					this.bigIndex++;
				}
			},
			swiperChange(e) { //轮播图切换改变数字
				console.log(e.detail.current);
				this.bigIndex = e.detail.current;
			},
			closeBig() {
				this.isBig = false;
			},
			// 分享微信好友
			onShareAppMessage() {
				return {
					title: this.project.name, //分享标题 这个可以根据业务需求去定义
					path: '/pages/index/projects/info/info?id=' + this.project.id //例如：path: 'page/home/index'
				}
			},
			// 分享朋友圈
			onShareTimeline() {
				return {
					title: this.project.name, //分享标题 这个可以根据业务需求去定义
					path: '/pages/index/projects/info/info?id=' + this.project.id //例如：path: 'page/home/index'
				}
			},
			navigation() {
				uni.openLocation({
					latitude: Number(this.latitude), //维度
					longitude: Number(this.longitude), //经度
					name: this.project.name, //目的地定位名称
					scale: 15, //缩放比例
					address: this.project.address //导航详细地址
				})
			},
			makePhoneCall(index) {
				console.log(index)
				let phone = this.guwenList[index].phone
				phone = phone.toString()
				uni.makePhoneCall({
					phoneNumber: phone
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shareBtn {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		opacity: 0;
	}

	[v-cloak] {
		display: none;
	}

	.homebg {
		position: absolute;
		width: 750rpx;
		height: 771rpx;
		left: 0;
		top: 0;
	}

	.titleNav {
		text-align: center;
		font-weight: 700;
		font-size: 34rpx;
		color: #3E3A39;
		margin-left: 54%;
	}

	.content {
		position: absolute;
		width: 100%;
		height: 100vh;
		overflow-y: hidden;
	}

	.scrollBox {
		position: absolute;
		width: 100%;
		height: 88vh;
		overflow-y: scroll;
	}

	.bigBox {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 99999999;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;

		.bigInfo {
			width: 690rpx;
			height: 1100rpx;
			position: relative;

			.bigarrowBox {
				width: 100%;
				margin-top: 60rpx;
				display: flex;
				justify-content: space-between;

				.bigswiperNum {
					width: 70rpx;
					height: 30rpx;
					background-color: rgba(0, 0, 0, 0.2);
					border-radius: 15rpx;
					bottom: 20rpx;
					right: 20rpx;
					display: flex;
					align-items: center;

					.bigswiperIndex {
						width: 100%;
						height: 20rpx;
						font-size: 20rpx;
						line-height: 20rpx;
						color: #F4F4F4;
						text-align: center;
					}
				}

				.arrowLeft {
					width: 19rpx;
					height: 30rpx;
				}

				.arrowRight {
					width: 19rpx;
					height: 30rpx;
				}
			}

			.title {
				width: 100%;
				height: 90rpx;
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
				color: #ffffff;
				line-height: 90rpx;
				background-color: #51B18B;
				border-radius: 10rpx 10rpx 0rpx 0rpx;
			}

			.bigswiperBox {
				width: 100%;
				height: 618rpx;
				.itemImg {
					width: 100%;
					height: 100%;
				}
			}
			.close {
				position: absolute;
				top: 24rpx;
				right: 30rpx;
				width: 43rpx;
				height: 43rpx;
			}


		}

	}

	.bottomMenuBox {
		position: fixed;
		width: 100%;
		height: 98rpx;
		bottom: 0;
		display: flex;
		z-index: 9999999;

		.left {
			position: relative;
			width: 253rpx;
			height: 98rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;

			.shareBox {
				position: absolute;
				width: 40rpx;
				height: 75rpx;
				top: 15rpx;
				left: 47rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;

				.shareIcon {
					width: 28rpx;
					height: 28rpx;
				}

				.shareText {
					font-size: 20rpx;
					color: #3E3A39;
				}
			}

			.orderBox {
				position: absolute;
				width: 40rpx;
				height: 75rpx;
				top: 15rpx;
				left: 156rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;

				.orderIcon {
					width: 28rpx;
					height: 28rpx;
				}

				.orderText {
					font-size: 20rpx;
					color: #3E3A39;
				}
			}
		}

		.right {
			width: 497rpx;
			height: 98rpx;
			background-color: #51B18B;
			font-size: 32rpx;
			text-align: center;
			color: #fff;
			line-height: 100rpx;
		}
	}

	.detailBox {
		width: 710rpx;
		// height: 680rpx;
		margin-left: 20rpx;
		margin-top: 25rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding-top: 43rpx;
		padding-bottom: 80rpx;
		margin-bottom: 140rpx;
		font-size: 0;

		.shenmingBox {
			width: 670rpx;
			// height: 580rpx;
			margin-top: 60rpx;
			margin-left: 20rpx;
			overflow-y: scroll;

			.title {
				display: block;
				width: 100%;
				font-size: 24rpx;
				color: #3E3A39;
				line-height: 30rpx;
				text-align: left;
				display: flex;
				align-items: center;

				.dot {
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					background-color: #3E3A39;
					margin-right: 24rpx;
				}
			}

			.info {
				display: block;
				width: 100%;
				margin-top: 30rpx;
				font-size: 24rpx;
				color: #3E3A39;
				line-height: 50rpx;
				text-align: justify;
				text-align: left;
			}
		}

		.line {
			width: 670rpx;
			margin-top: 50rpx;
			margin-left: 20rpx;
			border-bottom: 1rpx dotted #3E3A39;
		}

		.top {
			width: 668rpx;
			height: 30rpx;
			margin-left: 20rpx;
			display: flex;
			justify-content: space-between;

			.left {
				height: 28rpx;
				font-size: 30rpx;
				color: #000000;
				letter-spacing: 6rpx;
				font-weight: 700;
			}

			.right {
				font-weight: 400;
				// width: 59rpx;
				height: 15rpx;
				font-size: 20rpx;
				text-align: left;
				color: #A7A7A7;
			}
		}

		.detailImg {
			width: 670rpx;
			height: 380rpx;
			margin-left: 20rpx;
			margin-top: 48rpx;
		}

		.detailBoxInner {
			width: 670rpx;
			margin-left: 20rpx;
			margin-top: 66rpx;
			overflow-y: scroll;
			display: flex;
			flex-direction: column;

			.text {
				font-size: 24rpx;
				color: #3E3A39;
				text-align: left;
				margin-bottom: 10rpx;
				letter-spacing: 3rpx;
				display: flex;
				align-items: center;

				.dot {
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					background-color: #3E3A39;
					margin-right: 24rpx;
				}
			}
		}
	}

	.btn {
		width: 710rpx;
		height: 90rpx;
		margin-top: 60rpx;
		margin-left: 20rpx;
		background-color: #51b18b;
		border-radius: 10rpx;
		text-align: center;
		line-height: 90rpx;
		color: #ffffff;
	}

	.guwenBox {
		width: 710rpx;
		margin-top: 70rpx;
		margin-left: 20rpx;

		.guwenItem {
			width: 100%;
			height: 300rpx;
			background: url('https://qthf.cdguguai.net.cn/img/index/guwenbg.png');
			background-size: 100% 100%;
			position: relative;
			margin-bottom: 20rpx;

			.avatar {
				position: absolute;
				width: 272rpx;
				height: 193rpx;
				left: 14rpx;
				top: 14rpx;
			}

			.name {
				position: absolute;
				font-size: 28rpx;
				font-weight: bold;
				color: #323232;
				top: 31rpx;
				left: 320rpx;
				line-height: 28rpx;
			}

			.rate {
				position: absolute;
				left: 434rpx;
				top: 28rpx;
			}

			.describe {
				position: absolute;
				width: 350rpx;
				height: 16rpx;
				left: 320rpx;
				top: 88rpx;
				font-size: 16rpx;
				line-height: 16rpx;
				color: #51B18B;
				display: inline-block;
				overflow: auto;
			}

			.zixun {
				position: absolute;
				width: 120rpx;
				height: 44rpx;
				left: 315rpx;
				top: 151rpx;
				background: #51B18B;
				color: #ffffff;
				font-size: 22rpx;
				text-align: center;
				line-height: 44rpx;
				border-radius: 10rpx;

				.zixunBtn {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					opacity: 0;
				}
			}

			.tel {
				position: absolute;
				width: 120rpx;
				height: 44rpx;
				left: 464rpx;
				top: 151rpx;
				border-radius: 10rpx;
				text-align: center;
				line-height: 44rpx;
				background: #3A3A3A;
				color: #ffffff;
				font-size: 22rpx;
			}

			.rate {
				position: absolute;
				left: 434rpx;
				top: 28rpx;
			}
		}
	}

	.guwenTitle {
		font-size: 28rpx;
		font-weight: 700;
		margin-left: 40rpx;
		margin-top: 60rpx;
		display: block;
	}

	.mapBox {
		width: 710rpx;
		height: 680rpx;
		margin-left: 20rpx;
		margin-top: 25rpx;
		background-color: #ffffff;
		border-radius: 10rpx;

		.mapTitle {
			display: block;
			font-size: 28rpx;
			margin-left: 20rpx;
			padding-top: 43rpx;
		}

		.mapContainer {
			width: 670rpx;
			height: 350rpx;
			margin-left: 20rpx;
			margin-top: 44rpx;
			border-radius: 15rpx;
			overflow: hidden;
		}

		.mapMenuBox {
			width: 614rpx;
			height: 130rpx;
			margin-left: 48rpx;
			margin-top: 42rpx;
			display: flex;
			justify-content: space-between;

			.mapMenuItem {
				width: 81rpx;
				height: 130rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.itemIcon {
					width: 81rpx;
					height: 81rpx;
				}

				.itemText {
					font-size: 24rpx;
					color: #3E3A39;
				}
			}
		}
	}

	.officialaccount {
		width: 710rpx;
		height: 180rpx;
		margin-left: 20rpx;
		margin-top: 25rpx;
	}

	.huxingBox {
		width: 710rpx;
		height: 540rpx;
		margin-top: 44rpx;
		margin-left: 20rpx;
		overflow-x: scroll;
		position: relative;
		white-space: nowrap;

		.hxItem {
			position: relative;
			display: inline-block;
			width: 508rpx;
			height: 100%;
			margin-right: 20rpx;
			overflow: hidden;

			.item {
				width: 508rpx;
				height: 385rpx;
				display: block;
				border-radius: 10rpx 10rpx 0rpx 0rpx;
			}

			.nameBox {
				width: 508rpx;
				height: 155rpx;
				background-color: #51B18B;
				border-radius: 0rpx 0rpx 10rpx 10rpx;
				display: flex;
				flex-direction: column;

				.hxname {
					font-size: 28rpx;
					color: #ffffff;
					margin-top: 28rpx;
					margin-left: 37rpx;
				}

				.hxarea {
					font-size: 22rpx;
					color: #ffffff;
					margin-top: 21rpx;
					margin-left: 37rpx;
				}
			}

			.big {
				position: absolute;
				bottom: 35rpx;
				right: 20rpx;
				width: 70rpx;
				height: 70rpx;
			}
		}

		.hxItem:nth-last-child(1) {
			margin-right: 60rpx;
		}
	}

	.huxingTitle {
		font-size: 28rpx;
		font-weight: 700;
		margin-left: 40rpx;
		margin-top: 60rpx;
		display: block;
	}

	.briefBox {
		position: relative;
		width: 670rpx;
		height: 1000rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		background: url('https://qthf.cdguguai.net.cn/img/index/briefbg.png');
		background-size: 100% 100%;
		padding-left: 20rpx;
		padding-right: 20rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.name {
			font-weight: 700;
			font-size: 36rpx;
			color: #3E3A39;
			margin-top: 40rpx;
			display: block;
		}

		.describeBox {
			width: 100%;
			height: 34rpx;
			display: flex;
			margin-top: 34rpx;
			overflow-x: scroll;

			.describeItem {
				height: 100%;
				font-size: 19rpx;
				color: #51B18B;
				background: #f4faf8;
				padding-left: 17rpx;
				padding-right: 17rpx;
				margin-right: 10rpx;
				line-height: 34rpx;
				border-radius: 17rpx;
				flex-shrink: 0;
			}
		}

		.shareBox {
			position: absolute;
			width: 40rpx;
			height: 75rpx;
			top: 45rpx;
			right: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;

			.shareIcon {
				width: 28rpx;
				height: 28rpx;
			}

			.shareText {
				font-size: 20rpx;
				color: #8E8E8E;
			}
		}

		.infoBox {
			position: relative;
			width: 670rpx;
			height: 244rpx;
			border-radius: 12rpx;
			background: #ffffff;
			border: 1rpx solid #D4D4D4;
			margin-top: 30rpx;
			display: flex;
			flex-direction: column;

			.price {
				color: #3e3a39;
				font-size: 24rpx;
				text-align: left;
				margin-top: 15rpx;
				margin-left: 30rpx;

				.priceNum {
					color: #dc6048;
					font-weight: 700;
					font-size: 32rpx;
				}
			}

			.line {
				width: 100%;
				height: 1rpx;
				background-color: #D4D4D4;
				margin-top: 25rpx;
			}

			.commissionBox {
				width: 100%;
				display: flex;
				margin-top: 26rpx;
				margin-left: 30rpx;

				.label {
					width: 56rpx;
					height: 26rpx;
					border: 1rpx solid #DC6048;
					border-radius: 0rpx 15rpx 0rpx 15rpx;
					text-align: center;
					font-size: 18rpx;
					color: #DC6048;
				}

				.percent {
					// width: 150rpx;
					font-size: 26rpx;
					color: #DC6048;
					margin-left: 16rpx;

				}
			}

			.address {
				width: 80%;
				margin-top: 27rpx;
				margin-left: 30rpx;
				font-size: 24rpx;
				color: #3E3A39;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.navigation {
				position: absolute;
				width: 24rpx;
				height: 24rpx;
				right: 29rpx;
				bottom: 25rpx;
			}
		}

		.highlightsBox {
			width: 634rpx;
			margin-top: 50rpx;

			.title {
				display: block;
				width: 100%;
				text-align: center;
				font-size: 32rpx;
			}

			.highlightsItemBox {
				width: 100%;
				height: 390rpx;
				display: flex;
				margin-top: 80rpx;
				overflow-x: scroll;

				.highlightsItem {
					height: 100%;
					margin-right: 64rpx;
					flex-shrink: 0;
					display: flex;
					align-items: flex-start;
					margin-right: 65rpx;
					white-space: nowrap;
					/* 禁止文本换行 */
					overflow: hidden;
					/* 超出部分隐藏 */
					text-overflow: ellipsis;

					/* 超出部分显示为省略号 */
					.left {
						writing-mode: vertical-rl;
						font-size: 24rpx;
						letter-spacing: 10rpx;
					}

					.center {
						font-size: 24rpx;
						margin-left: 10rpx;
						color: #8e8e8e;
						margin-top: -5rpx;
					}

					.right {
						writing-mode: vertical-rl;
						font-size: 20rpx;
						margin-left: 10rpx;
						color: #8e8e8e;
						letter-spacing: 10rpx;
					}
				}
			}
		}
	}

	.swiperBox {
		position: relative;
		width: 710rpx;
		height: 618rpx;
		.swiper-item,
		.itemImg {
			position: relative;
			width: 100%;
			height: 100%;
		}
	}
</style>